<template>
  <div>
    <div class="cards">
      <div class="cardBox">
        <apiCard class="apiCard" :params="item" :select="select" :index="index"  v-for="(item,index) in list" @handlerClick="handlerClick(item,index)"></apiCard>
      </div>

      <addApiKeyBtn @after-op="afterOp" v-if="list.length<6"></addApiKeyBtn>
      <div class="zhanwei" v-if="list.length<5"></div>
      <div class="zhanwei" v-if="list.length<4"></div>
      <div class="zhanwei" v-if="list.length<3"></div>
      <div class="zhanwei" v-if="list.length<2"></div>
    </div>
    <apiTab ref="apiTab" v-if="select!=-1"></apiTab>
  </div>
</template>

<script>
import apiCard from "@/views/apiServe/api/module/apiCard";
import addApiKeyBtn from "@/views/apiServe/api/module/addApiKeyBtn"
import apiTab from "@/views/apiServe/api/module/apiTab";
export default {
  name: "api",
  components:{
    apiCard,apiTab,
    addApiKeyBtn,
  },
  mounted() {
    this.getSelfApiKeys()
  },
  methods:{
    handlerClick(item,index){
      this.select = index
      this.$nextTick(()=>{
        this.$refs.apiTab.setData(item)
      })
    },
    afterOp(){
      this.getSelfApiKeys()
    },
    getSelfApiKeys(){
      let params = {
        page:0,
        pageSize:10,
      }
      this.$api.getSelfApiKeys(params).then(res=>{
        this.list = res.data
      })
    }
  },
  data(){
    return {
      list:[],
      select:-1
    }
  },
}
</script>

<style scoped lang="less">
.cards{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.cardBox{
  display: flex;
  flex-wrap: wrap;
  .apiCard{
    margin-right: 15px;
    margin-bottom: 20px;
    &:last-child{
      margin-right: 0;
    }
  }
}

.zhanwei{
  width: 180px;
  height: 180px;
}
</style>
